<template>
	<view class="pages">
		<view class="box">
			<view class="list" v-for="(item,index) in list" :key="index" @click="tourl('/pages/order/orderinfo?id='+item.id)">
				<view class="list1">
					<view style="color: #999;">{{item.orderCode}}</view>
					<view>
						<text style="color: #999;">待评价</text>
					</view>
				</view>
				 
				<view class="list2">
					<view class="img">
						<image :src="imageStatus[item.type]" mode="aspectFill"></image> 
					</view>
					<view class="txt">
						 <view  >
						 	<view class="txt1"> {{item.categoryName}}</view>
							<view class="txt1"> ￥{{item.actualMoney}}</view>
						 </view>
						 <!--  工程单 -->
						 <view  >
						 	<view v-if="item.serviceStartTime"> {{item.serviceStartTime}}</view>
						 	<view > {{item.serviceNum}}人服务 </view>
						 </view>
						 <view  >
						 	<view >  </view>
						 	<view > {{item.serviceNum}}人服务 </view>
						 </view>
					</view>
				</view> 
				  
				<view class="list4" style="padding: 20rpx;">
					<text style="margin-right: 20rpx;font-size: 26rpx">服务体验，一键评分</text> 
					<uni-rate  v-model="item.score" color="#AAAAAA" activeColor="#F93A59" :size="22" @change="(e)=>changeScore(e,item)"/>
				</view>
		
			</view>
			<view class="nothing" v-if="list.length==0" >- 暂无更多数据 -</view> 
		</view>
		 <evaluated-popup   ref="evaluated" :show="show" :score="choseItem.score" @handleSubmit="handleSubmit"></evaluated-popup>
	</view>
</template>

<script>
	import {getOrderPageAPI,getCalendarTimeAPI,getCalendarCountAPI} from "@/api/api.js"
	 import evaluatedPopup from "./components/evaluated-popup.vue"
	 import {createcommentAPI} from "@/api/user.js"
	import pageing from "@/mixins/pageing.js"
	export default {
		mixins:[pageing],
		components:{
			 evaluatedPopup
		},
		data() {
			return {
				imageStatus:[
					"https://jiejinda.oss-cn-beijing.aliyuncs.com/67c758999edbd6b893d515f7024f0f539e98cf61def99c29a16b0b40eb79a143.png",//周期保洁
					"https://jiejinda.oss-cn-beijing.aliyuncs.com/6e4b3b46f02412865fb2169fde42707dd11c97b8b6e89bf55bc0a931152c49e1.png",//单次保洁
					"https://jiejinda.oss-cn-beijing.aliyuncs.com/d45513f53d44ef2e6543ba0631002fd525b1efc14f344351aabf37e7dc17d1fa.png",//工程订单
					"https://jiejinda.oss-cn-beijing.aliyuncs.com/670b23b5915437167bca3b84b5cf6edc369fbb0f3239b3ae6673c48b99d44324.png",//陪护订单
					
				],
				list:[],
				show:false,
				  
				ids:[],
				score:"",
				choseItem:{
					 score:""
				}
			}
		}, 
		created() {			 
			 this.getlist()
		},
		methods: {
			handleSubmit(scoreVal){
				var data={
					scores:scoreVal,
					orderId:this.choseItem.id,
				}
				createcommentAPI(data).then(res=>{
					uni.showToast({
						title:"提交评价成功",
					})
					this.show=false
					this.resetQuery()
				})
			},
			changeScore(e,item){
				console.log(e,item)
				this.choseItem={
					 ...item,
					 score:e.value
				}
				this.show=true
				this.$refs.evaluated.id=item.id
				
 			} ,
			getlist(){
				var data={
					userId:uni.getStorageSync("userId"),
					type:3
				}
				 
				getOrderPageAPI(data).then(res=>{
					// this.total=res.total
					this.list= this.list.concat(res.map(item=>{
						return {
							...item,
							score:0
						}
					}))
				})
			},
			 
			resetQuery(){
				this.list=[]
				this.pageNo=1
				this.getlist()
			},
			 
		}
	}
</script>

<style scoped lang="scss">
.pages{
	background-color: #F9F9F9;
	min-height: 100vh;
	padding:20rpx ;
}

.box{
	 
}	
.list{
	background-color: #fff; 
	padding: 20rpx;
	border-radius: 20rpx;
	margin-bottom: 20rpx;
	
	.list1{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		color: #999999;
	}
	.list2{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		
		margin: 15rpx 0;
		 
		border-radius: 15rpx;
		.img{
			
			width: 160rpx;
			height: 128rpx;
			margin-right: 20rpx;
			image{
				 width: 160rpx;
				 height: 128rpx;
			}
		}
		.txt{
			flex: 1;
			>view{
				display: flex;
				align-items: center;
				justify-content: space-between;
				view{
					line-height: 50rpx;
					color: #999;
					font-size: 24rpx;
				}
				.txt1{
					font-size: 28rpx;
					color: #333;
				}
			}
			
		}
	}
	.list3{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10rpx 0;
		font-size: 26rpx;
	}
	.list4{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10rpx;
		background: #F2F2F2;
		border-radius: 32rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		padding: 15rpx;
	}
}
</style>
